<template>
	<view class="w-max relative">
		<image src="/static/img/index/coupon.png" class="w-max h184" :class="{'opa6':data.status==1&&!receive}" mode="">
		</image>
		<view class="absolute w-max h184 top0 flex ov-h">
			<view class="absolute p8 top0 left0 color-fff fs22 bg-zs pl14 pr14" style="border-radius: 20rpx 0 20rpx 0;">
				{{data.set=='platform'?'平台':'机构'}}
			</view>
			<view class="color-fff  text-center ov-h" style="width: 27%;">
				<view class="" v-if="data.type=='discount'">
					<text class="fs44 fw-700">{{data.discount}}</text>
					<text>折</text>
				</view>
				<view class="" v-else>
					<text>￥</text>
					<text class="fs44 fw-700">{{data.reduce_price}}</text>
				</view>
				<view class="fs26 u-line-2">
					满{{data.full_price}}可用
				</view>
			</view>
			<view class="flex1 pl20">
				<view class="color-232323 fs26 fw-700 u-line-2">{{data.name}}</view>
				<view class="color-999 fs24 mt12" v-if="data.due_type=='day'">
					领取后{{data.due_day}}天内有效
				</view>
				<view class="color-999 fs24 mt12" v-else>
					{{data.end_time}}前使用
				</view>
				<view class="color-999 fs24 mt20" @click="show=!show">
					使用规则 >
				</view>
			</view>
			<view class="dashed"></view>
			<view class="text-vertical color-FF704B pr32 pl32 fs26">
				<view v-if="sel" @click="$emit('change',data)">
					<view v-if="sel_id==data.id"> 取 消</view>
					<view v-else class="color-zs fw-w ">选 择</view>
				</view>
				<view @click="receiveCoupon" v-else-if="receive"> 立 即 领 取</view>
				<view @click="$tool.sjump('/pages/index/index')" v-else> 立 即 使 用</view>
			</view>
		</view>
		<u-popup mode="center" v-model="show" border-radius="20" width="600">
			<view class="bg-fff p30 ">
				<view class="fs30 fw-700 color-232323 text-center pb20">
					使用规则
				</view>
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view>{{data.rule}}</view>
				</scroll-view>
				<view class="mx90 bg-zs h72 radius12 flex row-center mt38 color-fff" @click="show=!show">
					我知道了
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "coupon",
		props: {
			// 是否已过期
			type: {
				type: Number,
				default: 0
			},
			// 是否显示领取按钮
			receive: {
				default: false
			},
			data: {
				default: ''
			},
			sel: {
				type: Boolean,
				default: false
			},
			sel_id: {
				default: 0
			},
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			// 
			receiveCoupon() {
				this.$request('/master/index/receiveCoupon', {
					coupon_id: this.data.coupon_id || this.data.id
				}).then(res => {
					this.$msg(res.msg)
					this.$emit('success', this.data)
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
